<template>
  <in-flip-panel :derection="derection" class="container">
    <template v-slot:front>
      <div>
    <h2>Login</h2>
    <el-form action="" :model="loginForm" ref="loginForm" :rules="rules">
      <div class="item" prop="username">
        <input type="text" v-model="loginForm.username" required />
        <label >UserName</label>
      </div>
      <div class="item" prop="password">
        <input type="password" v-model="loginForm.password" required />
        <label >Password</label>
      </div>
      <in-button type="stream" color="#03e9f4" bgcolor="#283046" @click.prevent="submitLogin()"   >Login</in-button>
      <in-button type="stream" color="#4839eb" bgcolor="#283046" @click.prevent="changeback()">Registry</in-button>
    </el-form>
      </div>
    </template>
    <template v-slot:back>
      <div>
    <h2>Registry</h2>
    <form action="" :model="registryForm" ref="registryForm" :rules="rules">
      <div class="item" prop="username">
        <input type="text" v-model="registryForm.username" required />
        <label >UserName</label>
      </div>
      <div class="item" prop="password">
        <input type="password" v-model="registryForm.password" required />
        <label >Password</label>
      </div>
       <div class="item" prop="confirmPassword">
        <input type="password" v-model="registryForm.confirmPassword" required />
        <label >Confirm Password</label>
      </div>
      <in-button type="stream" color="#03e9f4" bgcolor="#283046" @click.prevent="submitRegistry()" :disabled="registryBtn">Registry</in-button>
      <in-button type="stream" color="#4839eb" bgcolor="#283046" @click.prevent="changefront()">Back Login</in-button>
    </form>
      </div>
    </template>
  </in-flip-panel>

</template>

<script>
// import bus from '@/assets/common/js/bus'
// import md5 from 'js-md5'
import { encrypt } from '@/utils/crypto-js'// 引入rsaEncrypt.js

import {login, registry} from '@/api/user'
export default {
  name: 'loginWrapper',
  data: function () {
    return {
      derection: 'front',
      loginForm: { username: 'admin', password: '123456' },
      registryForm: { username: 'ceshi', password: '123456', confirmPassword: '123456' },
      registryBtn: false,
      curUserData: {},
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在  到 16 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在  到 16 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitLogin: function (e) {
      login({username: this.loginForm.username, password: encrypt(this.loginForm.password)}).then(res => {
        if (res.code === 0) {
          this.$store.commit('user/SET_USERINFO', res.data.userInfo)
          this.$store.commit('user/SET_TOKEN', res.data.session)
          this.$router.push('/home')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    submitRegistry () {
      if (this.registryForm.password === this.registryForm.confirmPassword) {
        this.registryBtn = true
        registry({username: this.registryForm.username, password: encrypt(this.registryForm.password)}).then(res => {
          if (res.code === 0) {
            this.$message.success(res.msg)
            this.registryBtn = false
          } else {
            this.$message.error(res.msg)
            this.registryBtn = false
          }
        })
      } else {
        this.$message.error('两次密码输入不一致')
      }
    },
    changeback () {
      this.derection = 'back'
    },
    changefront () {
      this.derection = 'front'
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
  text-align: center;
  color: aliceblue;
  margin-bottom: 30px;
  font-family: 'Courier New', Courier, monospace;
}

input {
  border: 0;
  background: none;
  outline: none;
  color: #fff;
  margin: 20px 0;
  display: block;
  width: 100%;
  padding: 5px 0;
  transition: 0.2s;
  border-bottom: 1px solid rgb(199, 191, 219);
}
input:hover {
  border-bottom-color: #fff;
}
.item {
  height: 45px;
  border-bottom: 1px solid #fff;
  margin-bottom: 40px;
  position: relative;
}
.item input {
  width: 100%;
  height: 100%;
  color: #fff;
  padding-top: 20px;
  box-sizing: border-box;
}
.item input:focus + label,
.item input:valid + label {
  top: 0px;
  font-size: 2px;
}
.item label {
  position: absolute;
  left: 0;
  top: 12px;
  transition: all 0.5s linear;
  color: #03e9f4;
}

</style>
